Workshop 


ActionScripts in FlashMX 


Bewegende beestjes 


Flash-animaties brengen leven in de webbrouwerij. Beginnende Flash'ers durven meestal 
nog geen ActionScripts gebruiken. Toch vormen deze scripts heel vaak de motor van een 
Flash-animatie. Eenmaal je het principe onder de knie hebt, zal je dan ook aan ActionScripts 
de voorkeur geven om de snelheid en de richting van een beweging te bepalen. 


muisknop klik je op het lieveheersbeestje en selecteer je ACTIONS. 
Je kan het Actions-venster ook oproepen door op Winpow en ver- 
volgens AcTIoNs te klikken of de functietoets Fg in te drukken. Ter- 


trialversie van FlashMX downloaden op [ www.macrome- 
dia.com/software/flash/download |. Om het principe van 


O m zelf met deze workshop aan de slag te gaan, kan je een 


beweging door ActionScripts te begrijpen zullen we een eenvou- 
dige figuur een rechtlijnige beweging laten uitvoeren. In FlashMX- 
taal noemen we dat een beweging langs de X-as. 


wijl het lieveheersbeestje geselecteerd blijft, geef je in het Actions- 
venster de volgende lijntjes code in: 
onClipEvent(enterFrame) { 


speed: 

this._x += speed; 
} 
En klaar is Kees. Bekijk de voorvertoning (CoNrroL — TEsT MOVIE) 
van de animatie en je zal zien dat het figuurtje traag, maar zonder 
schokken van links naar rechts beweegt. 
Wat gebeurt er precies? Het eerste lijntje ‘onClipEvent(enterFra- 
me)’ is niets meer dan een commando dat ervoor zorgt dat de code 
wordt uitgevoerd in een movieclip die slechts uit één frame bestaat. 
De code ‘enterframe’ kan je in mensentaal best vertalen als: ‘voer 


Stap 1 
Aan de slag 


Je maakt een nieuw Flash-filmpje van bijvoorbeeld 300 bij 200 
pixels met een groene achtergrond. Vervolgens importeer je het 
grafisch element. In dit voor- 
beeld hebben we uit de bijge- 


Document Properties 


Dimensions: _ 300 px (width) oe 200 px (height) 
Ee leverde voorbeelden (samples) onderstaande code uit.’ In het tweede lijntje geef je aan dat de snel- 
Match. Printer ) { Contents Default E 5 ES in E 5 
het lieveheersbeestje gekozen. heid één moet zijn. Wanneer je daar 2, 3 of hoger invult zal de snel- 
Background Color. UN Dit heeft voor deze oefening heid worden opgevoerd. Logisch, niet? De huidige positie van de 
FrameRate: (id | fps geen belang, kies gewoon een __movieclip op de X-as wordt dus telkens met één waarde verhoogd. 
leuke figuur. Dit proces herhaalt zich een aantal keer per seconde en op die ma- 
uier Units: . . . . 

Ei 5 R nier wordt beweging gesimuleerd. De snelheid waarmee de bewe- 

EED Te Geef de afmetingen in 9 f : 
_Help ) (Make Default) SDE ging wordt uitgevoerd hangt bovendien af van de framerate (hoe 


snel de frames per seconde worden afgespeeld). In de eerste scherm- 
afbeelding merk je dat we voor de normale norm gekozen hebben: 
12 frames per seconde. Het derde lijntje maakt de optelling van de 
huidige positie van de movieclip (this. x), vermeerderd met de snel- 
heidswaarde die je 
daarboven heb inge- 
geven. Je gebruikt de 
operator ‘+’ gevolgd 
door ‘= speed’ en zo- 


Stap 2 
Symbool maken 


Eml 


EI Actions for [No instance name assigned} (ladybug) 


E Actions 
(Z] Movie Control 
(3) Browser /Network 
@ fscommand 


Deze figuur converteren we nu naar een symbool. Waarom? Heel 
eenvoudig: symbolen springen in je Flash-animatie erg zuinig met 
geheugen om. Om de verandering 


5 10 15 20 25 30 35 40 45 so ss 60 65 70 
Convert to Symbol 


NE _ te voltooien gebruik je de functie- @ geurt doende weet je dat 
eter iii te weoievavor: gj ED) toets F8 of klik je op INSERT en ver- d spa) de waarde op de X-as 
pe oadVariables 5 
Omohk a Cia) Volgens op CONVERT TO SYMBOL. ® unioadMovie continu zal verho- 
7 = 5 Movie Clip Control En ® Ke! Ts} 5 
DE 5 } en. Wie opgelet 
Gebruik liever symbolen dan afbeeldingen. Variables ELDER GEE S à Ps 
pEvant { DE heef Ì 
Conditions/Loops speed = 1; eeft In de WISKUN- 
Printing this.x += speed; 


deles weet dat een 
B] user-Defined Functions 


Miscellaneous Actions hogere waarde op de 


Stap 5 fa nn X-as gewoon een be- 
Tijd voor actie (2) constants + weging van links 


ml Er 


naar rechts betekent. 


Lines 1 - 4 selected. 


ActionScripts brengen leven in de brouwerij. 


Het geheel komt nog steeds zeer statisch over, dus het is de hoog- 
ste tijd om er wat meer beweging in te brengen. Met de rechter- 


CLICKX MAGAZINE 38 - 8 APRIL 2003 


Stap 4 
Experimenteren is fun! 


Nu je dit alles weet, kan je een paar experimentjes uitvoeren met 
je lieveheersbeestje. Verhoog bijvoorbeeld de waarde van ‘speed’ 
met 2 in plaats van 1. De animatie verloopt dubbel zo snel. Laat 
het beestje de ziel uit zijn lijf rennen door het aan snelheid 3 of 
4 te laten lopen. Een ander experiment: plaats het lieveheers- 
beestje aan de rechterkant en noteer als waarde voor de snelheid 
-2 in plaats van 2. Inderdaad: het beestje kruipt nu van rechts 
naar links. De waarde op de X-as vermindert alsmaar. Nog een- 
tje om het af te leren: wanneer we in deze code de x in y veran- 
deren, zal het beestje zich niet horizontaal maar verticaal bewe- 
gen, op de Y-as. In Flash neemt de Y-waarde af naarmate je ho- 
ger beweegt. Wanneer het object lager gaat, zal de Y-waarde toe- 
nemen. 


Stap 5 
Een beweging van 25 frames 


Je kan het lieveheersbeestje ook een niet-rechtlijnig pad laten vol- 
gen. In dat geval zullen we toch een beroep moeten doen op een 
zogenaamde ‘Motion Tween’ in plaats van een ActionScript. Plaats 
een nieuw keyframe op vakje 25: INSERT — KEYFRAME. 


ee @ keys.l.fla 
v Timeline 
BAO 510 15 20 | 30 35 40 45 50 55 60 65 70 75 [4 
[7 beetle /] mj. dl 
iel EE AOW 25 120ts 20 Jr 


Keyframes sturen je beweging. 


Stap 6 
Bewegingsovergang 


Vervolgens klik je in de tijdlijn ergens tussen vakje één en vijfen- 
twintig. En in het Properties-venster geef je aan dat hier een Mo- 
TION TWEEN moet komen. Je kruist bovendien de optie ORIENT TO 
PATH aan, hierdoor zal het diertje zich meedraaien naar de rich- 
ting van het pad dat je zodadelijk gaat tekenen. 

Vervolgens voeg je een nieuwe laag toe door op het laagicoontje 
met het plusteken te klikken. Met het borstelgereedschap schilder 


@ keys.L.fla 


KIEK TeK 


We bereiden de gidslaag voor. 


je het pad ruwweg op deze nieuwe laag. Wees gerust, deze bor- 
stelstreek is in de uiteindelijke presentatie niet zichtbaar. 
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v Timeine 
| „an: s 0 15 20 25 30 35 40 45 50 55 60 65 70 75 Mi 
[Our 9-8 
DP beere EEN =| 
A0 Ee TETN 9 on on EC 
E scene 1 & Sn 
« 
ei) >| - ‚ 
ä „2 Brush E 4 


Dit is de weg die het beestje gaat afleggen. 


Stap 7 
Volg de gids 


Dan verander je de eigenschappen van deze laag via MopirFY — LAYER, 
en daar bepaal je dat de laag waarop je het pad geschilderd heb Gur- 
DE wordt. Je klikt op de laag met het beestje, opnieuw selecteer je 
MopirFYy — LAYER en daar duid je aan dat deze laag Guipep wordt. Je 
klikt op de tijdlijn op het eerste frame en daarna sleep je het lieve- 
heersbeestje met het cirkeltje op het begin van de borstelstreek. 


& keys.Lna 


Daarnaklikjeopfra- ‘eoo 


me 25 en vervolgens 
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sleep je het diertje ‘Sea s::a! 
op heteinde vande nme 
borstelstreek. In de Eni 


preview, die je op- 
roept door te klikken 
op CONTROL — TEST 
Movie, merk je dat 
het beestje zich nu 
braaf in alle bochten 
wringt, zonder dat 
het pad zelf zicht- 
baar is. 


es) 
Het lieveheersbeestje blijft op het ‘rechte’ pad. 


e@oe keys.1.swf 


Nog even 
het filmpje 
testen en 
klaar is kees. 


— Dirk Schoofs — 
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